/**
 * Dear programmer:
 * When I wrote this code, only god and I knew how it worked.
 * Now, only god knows it!
 *
 * @author: Pegasus  Date: 2018-11-27 Time: 21:34
 *
 * 用在导航栏下方，点击跳转日期选择
 */

import React, {Component} from 'react';
import {
  View,
  Text, TouchableOpacity
} from 'react-native';
import PropTypes from 'prop-types';
import {SCREEN_WIDTH} from "../../constant/PHScreen"
import {COLOR_THEME} from "../../constant/PHColors"
import AntDesign from "react-native-vector-icons/AntDesign"

export default class DateDisplayView extends Component {

  static propTypes = {
    leftText: PropTypes.string, // 左侧显示文字
    onClickLeft: PropTypes.func, // 左侧点击事件
    rightText: PropTypes.string, // 右侧显示文字
    onClickRight: PropTypes.func // 右侧点击事件
  };

  static defaultProps = {
    leftText: null,
    onClickLeft: null,
    rightText: null,
    onClickRight: null
  }

  render() {
    return (
      <View style={{height: 50, flexDirection: 'row'}}>
        {
          this.props.leftText &&
          <TouchableOpacity style={{width: SCREEN_WIDTH / 2, height: 50}} activeOpacity={0.8} onPress={this.props.onClickLeft}>
            <View style={{
              flex: 1,
              flexDirection: 'row',
              justifyContent: 'flex-start',
              alignItems: 'center'
            }}>
              <Text style={{
                fontSize: 14,
                color: COLOR_THEME,
                marginLeft: 15
              }}>
                {this.props.leftText}
              </Text>
              <AntDesign name={'right'} size={14} style={{color: COLOR_THEME}}/>
            </View>
          </TouchableOpacity>
        }

        {
          this.props.rightText &&
          <TouchableOpacity style={{width: SCREEN_WIDTH / 2, height: 50}} activeOpacity={0.8} onPress={this.props.onClickRight}>
            <View style={{
              flex: 1,
              flexDirection: 'row',
              justifyContent: 'flex-end',
              alignItems: 'center'
            }}>
              <View style={{flexDirection: 'row'}}>
                <Text style={{
                  fontSize: 14,
                  color: COLOR_THEME
                }}>
                  {this.props.rightText}
                </Text>
                <AntDesign name={'right'} size={14} style={{color: COLOR_THEME, marginRight: 15}}/>
              </View>
            </View>
          </TouchableOpacity>
        }

      </View>
    )
  }
}